import { Flex, Spin } from "antd";
import { useEffect, useRef, useState } from "react";
import {
  ReactFlow,
  Background,
  useNodesState,
  useEdgesState,
  ReactFlowProvider,
} from "@xyflow/react";
import "@xyflow/react/dist/style.css";
import LabelEdge from "./edges/label_edge";
import styles from "./index.module.scss";

import InternetNode from "./nodes/internet_node";
import VideoNode from "./nodes/video_node";
import CloudNode from "./nodes/cloud_node";

import IpcNode from "./nodes/ipc_node";
import DcsNode from "./nodes/dcs_node";
import ExchangeNode from "./nodes/exchange_node";
import AiNode from "./nodes/ai_node";
import { remoteCommunicationState } from "@/api/communication";
import { useStore } from "@/store/conveyor";

export const initialEdges: any = [
  {
    id: "products-warehouses",
    source: "ipc",
    target: "dcs",
    animated: false,
    type: "bezier",
  },
  {
    id: "products-suppliers",
    source: "ipc",
    target: "exchange",
    animated: false,
    type: "bezier",
  },
  {
    id: "products-2",
    source: "exchange",
    target: "exchange_up",
    animated: false,
    type: "bezier",
  },
  {
    id: "products-3",
    source: "exchange",
    target: "exchange_down",
    animated: false,
    type: "bezier",
  },
];

export const initialNodes: any = [
  //工控机
  // {
  //   id: "ipc",
  //   position: { x: 0, y: 200 },
  //   type: "ipc",
  //   data: {
  //     label: "工控机",
  //   },
  // },
  // {
  //   id: "dcs",
  //   position: { x: 40, y: 50 },
  //   type: "dcs",
  //   data: {
  //     label: "DCS",
  //   },
  // },
  // //交换机
  // {
  //   id: "exchange",
  //   position: { x: 300, y: 200 },
  //   type: "exchange",
  //   data: {
  //     label: "交换机",
  //   },
  // },
  // {
  //   id: "exchange_up",
  //   position: { x: 500, y: 100 },
  //   type: "ai",
  //   data: {
  //     label: "AI监测",
  //   },
  // },
  // {
  //   id: "exchange_down",
  //   position: { x: 500, y: 300 },
  //   type: "ai",
  //   data: {
  //     label: "AI监测",
  //   },
  // },
];

const nodeTypes: any = {
  video: VideoNode,
  internet: InternetNode,
  plc: CloudNode,

  dcs: DcsNode,
  ipc: IpcNode,
  exchange: ExchangeNode,
  ai: AiNode,
};

const edgeTypes = {
  processStep: LabelEdge,
};

const DataDnDFlow = () => {
  const reactFlowWrapper = useRef(null);
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges] = useEdgesState(initialEdges);
  const [loading, setLoading] = useState<boolean>(false);
  const { conveyorList } = useStore();

  useEffect(() => {
    if (conveyorList?.length) {
      search(conveyorList);
    }
  }, [conveyorList]);
  const search = async (list) => {
    try {
      let nodeList = [
        {
          id: "ipc",
          position: { x: 0, y: 200 },
          type: "ipc",
          data: {
            label: "工控机",
          },
        },
        {
          id: "dcs",
          position: { x: 40, y: 50 },
          type: "dcs",
          data: {
            label: "DCS",
          },
        },
        //交换机
        {
          id: "exchange",
          position: { x: 300, y: 200 },
          type: "exchange",
          data: {
            label: "交换机",
          },
        },
      ];
      list.map((item, index: number) => {
        nodeList.push({
          id: `ai_${item.id}`,
          position: { x: 500, y: list.length == 1 ? 200 : 100 + 200 * index },
          type: "ai",
          data: {
            label: item.conveyor,
          },
        });
      });
      let startEdges = [
        {
          id: "products-warehouses",
          source: "ipc",
          target: "dcs",
          animated: false,
          type: "bezier",
        },
        {
          id: "products-suppliers",
          source: "ipc",
          target: "exchange",
          animated: false,
          type: "bezier",
        },
      ];
      list.map((item) => {
        startEdges.push({
          id: "product_" + item.id,
          source: "exchange",
          target: `ai_${item.id}`,
          animated: false,
          type: "bezier",
        });
      });
      setNodes(nodeList);
      setEdges(startEdges);
      let res: any = await remoteCommunicationState();
      let statusList = res.data;
      startEdges.map(item=>{
        item.animated = true;
        item.type = 'processStep'
      })
      statusList.map((status) => {
        let { conveyor_id, camera_com } = status;
        let index = startEdges.findIndex((e) => e.target == `ai_${conveyor_id}`);
        let current = startEdges[index];
        current.animated = camera_com == 1 ? true : false;
      });
      console.log(startEdges)
      setEdges([...startEdges]);
    } finally {
    }
  };

  return (
    <Flex flex={1} style={{ width: "100%", height: "100%" }}>
      {/* <Spin spinning={loading}> */}
      <ReactFlowProvider>
        <Flex className={styles.dndflow}>
          <div className={styles.reactflow_wrapper} ref={reactFlowWrapper}>
            <ReactFlow
              nodes={nodes}
              edges={edges}
              nodeTypes={nodeTypes}
              edgeTypes={edgeTypes}
              fitView
              maxZoom={0.6}
              minZoom={0.6}
              style={{ backgroundColor: "#fff" }}
              proOptions={{ hideAttribution: true }}
            >
              <Background gap={16} />
            </ReactFlow>
          </div>
        </Flex>
      </ReactFlowProvider>
      {/* </Spin> */}
    </Flex>
  );
};

export default DataDnDFlow;
